﻿<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="app" >
    固定跳转
    <a href="http://www.baidu.com">百度</a><br>
    <!--
    通过v-bind可以实现动态跳转
       v-bind作用是 通过vue 控制 标签的属性
        使用方式 v-bind:属性名="vue数据键"
    -->
    动态跳转
    <a v-bind:href="forwardUrl">{{forwardTitle}}</a><br>
    <br>
    原始语法如下：
    <div hidden="true">v-bind test</div><br>
    简化写法
    <div :hidden="hiddenValue">v-bind test</div>

</div>

<script src="../js/vue.js"></script>
<!--js  vue 数据模型层 -->
<script>

    var vue = new Vue({
        el:"#app",
        data: {
            hiddenValue:true, //  页面元素不影藏 ， 如果是true表示隐藏页面元素
            forwardUrl:"http://www.baidu.com",
            forwardTitle:"百度"
        }
    })

</script>
</body>
</html>